<template>
  <div class="pie-wrap" :style="{ width: width, height: height }">
    <div class="pie" ref="pie"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    width: {
      default: () => "100%",
    },
    height: {
      default: () => "100%",
    },
    value: {
      type: Array,
      default: () => [
        { value: 150, name: "已使用" },
        { value: 300, name: "未使用" },
      ],
    },
    legend: {
      type: Array,
      default: () => [{ name: "已使用" }, { name: "未使用" }],
    },
    colors: {
      type: Array,
      default: () => [
        "#c23531", //未使用
        "#61a0a8", //已使用
      ],
    },
  },
  data() {
    return {
      option: null,
      chart: null,
    };
  },
  watch: {
    value() {
      this.setOptions();
    },
  },
  methods: {
    setOptions() {
      this.option = {
        color: this.colors,
        legend: {
          icon: "circle",
          textStyle: {
            color: this.colors,
          },
          orient: "vertical",
          top: "middle",
          data: this.legend,
        },
        series: [
          {
            name: "使用情况",
            type: "pie",
            radius: "60%",
            startAngle: 60,
            center: ["20%", "50%"],
            data: this.value,
            label: {
              show: false,
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: "#fff",
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.chart.setOption(this.option);
    },
  },
  mounted() {
    this.chart = echarts.init(this.$refs.pie);
    this.setOptions();
    window.addEventListener("resize", () => {
      this.chart.resize();
    });
  },
};
</script>

<style lang="scss" scoped>
.pie-wrap {
  width: 100%;
}
.pie {
  width: 100%;
  margin: 0 auto;
  height: 100%;
  padding-top: 35px;
}
</style>
